<template>
  <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">ID：</span>
          <el-input v-model="id" placeholder="请输入ID" style="width: 70%" @keyup.enter.native="getTableData(1)"></el-input>
        </el-col>
        <el-col :span="6">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">状态：</span>
          <el-select clearable v-model="param.status.value" placeholder="状态" @change="getTableData(1)">
            <el-option v-for="item in param.status.opts" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">日期：</span>
          <el-date-picker
            v-model="param.time"
            type="date"
            placeholder="选择日期"
            @change="getTableData(1)"
            >
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getTableData(1)" style="width:25%;">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" border align="center" style="margin-top: 20px;">
        <el-table-column label="id" property="id" min-width="100" align="center"></el-table-column>
        <el-table-column label="用户ID" property="fuid" min-width="100" align="center"></el-table-column>
        <el-table-column label="回款标的ID" property="fyybid" min-width="100" align="center"></el-table-column>
        <el-table-column label="回款投资记录" property="fyytzjlid" min-width="100" align="center"></el-table-column>
        <el-table-column label="预约金额" property="fyyje" min-width="100" align="center"></el-table-column>
        <el-table-column label="预约期限" property="fyyqx" min-width="150" align="center"></el-table-column>
        <el-table-column label="加息比列" property="fyyjxbl" min-width="100" align="center"></el-table-column>
        <el-table-column label="预约时间" property="tdate" min-width="150" align="center"></el-table-column>
        <el-table-column label="回款时间" property="tyjftsj" min-width="150" align="center"></el-table-column>
        <el-table-column label="状态" property="fzt" min-width="100" align="center">
          <template slot-scope="scope">
            <span v-html="scope.row.fzt"></span>
          </template>
        </el-table-column>
        <el-table-column label="复投标的ID" property="fnewbid" min-width="100" align="center"></el-table-column>
        <el-table-column label="复投投资记录ID" property="fnewtzjlid" min-width="100" align="center"></el-table-column>
        <el-table-column label="复投时间" property="fnewtdate" min-width="150" align="center"></el-table-column>
        <el-table-column label="异常信息" property="terro" min-width="100" align="center"></el-table-column>
      </el-table>
      <div style="margin: 30px 0;">
        <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
  </div>
</template>
<script>
import { dateFormat } from 'vux'
export default {
  data() {
    return {
      id: this.$route.params.id,
      param: {
        status:{
          value: '',
          opts:[{
            label:'预约成功',
            value: 0
          },{
            label:'复投成功',
            value: 1         
          },{
            label:'预约取消',
            value: 2            
          }]
        },
        time:''
      },
      tableData:[],
      total: 0,
      pageSize: 20,
    }
  },
  methods: {
    getTableData (page=1) {
      this.$get(this,{api:'member/loadYyftlb.do',data: {
          fuid: this.id,
          fzt: this.param.status.value,
          tDate: dateFormat(this.param.time,'YYYY-MM-DD'),
          pageSize: this.pageSize,
          page
        }
      }).then(({data})=>{
        if (data.state === 0) {
          this.tableData = data.content.data;
          this.total = data.content.num;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    handleCurrentChange(val) {
      this.getTableData(val)
    },
  },
  mounted() {
    this.getTableData();
  }
}
</script>

<style lang="scss" module>
.header {
  font-size: 14px;
  padding-bottom: 20px;
}
</style>


